<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/index.js"></script>
    <title>Document</title>
</head>
<body>
<div id="video">
    <div style="padding: 0 8px 0;">视频管理
        <el-button style="float: right" type="primary" class="el-button--mini" icon="el-icon-plus"
                   v-on:click="add">新增
        </el-button>
    </div>
    <el-table
            :data="tableData"
            style="width: 100%;">
        <el-table-column
                label="日期">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="视频ID"
                prop="vid"
                width="80px">
        </el-table-column>
        <el-table-column
                label="视频封面"
                prop="imgUrl">
            <template slot-scope="scope">
                <img :src="scope.row.imgUrl" height="60" width="96"/>
                <el-button
                        style="width: 96px;"
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        @click="imgEdit(scope.$index, scope.row)">修改
                </el-button>
            </template>
        </el-table-column>
        <el-table-column
                label="视频名称"
                prop="name">
            </el-table-column>
        <el-table-column
                label="视频分类"
                prop="type">
        </el-table-column>
        <el-table-column
                label="视频简介"
                prop="introduce">
        </el-table-column>
        <el-table-column
                label="作者"
                prop="author">
        </el-table-column>
        <el-table-column
                label="播放量"
                prop="views">
        </el-table-column>
        <el-table-column
                v-if="false"
                label="??"
                prop="av">
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        circle
                        type="success"
                        icon="el-icon-caret-right"
                        @click="handlePlay(scope.$index, scope.row)">
                </el-button>
                <el-button
                        size="mini"
                        circle
                        type="primary"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)">
                </el-button>
                <el-button
                        size="mini"
                        circle
                        icon="el-icon-delete"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            style="float: right;margin-top: 10px;"
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="4"
            layout="prev, pager, next"
            :total="totalPage">
    </el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible" top="1px">
        <el-form :model="form" >
            <el-form-item label="视频名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="视频分类" :label-width="formLabelWidth">
                <el-select v-model="form.type" placeholder="请选择视频分类">
                    <el-option v-for="type in typeList" :value="type.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="视频简介" :label-width="formLabelWidth">
                <el-input v-model="form.introduce" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" :label-width="formLabelWidth">
                <el-input v-model="form.author" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="form.av" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false" v-on:click="sub">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog
            title="修改封面"
            :visible.sync="dialogVisible1"
            width="30%">
        <div>
            <el-upload
                    limit="1"
                    ref="upload"
                    name="file"
                    accept="image/jpeg,image/gif,image/png"
                    action="/dao/update/videoImg"
                    :file-list="fileList"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="uploadSuccess"
                    :auto-upload="false">
                <i class="el-icon-plus"></i>
                <el-button style="display: none;" size="small" type="success" @click="submitUpload()">上传到服务器</el-button>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false;">取 消</el-button>
    <el-button type="primary" @click="submitImg">确 定</el-button>
  </span>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#video",
        data() {
            return {
                tableData: [],
                typeList: [],
                fileList: [],
                vid:'',
                search: '',
                currentPage: 1,
                totalPage: 1,
                dialogFormVisible: false,
                form: {
                    imgUrl: '',
                    vid: '',
                    name: '',
                    type: '',
                    introduce: '',
                    author: '',
                    av: ''
                },
                formLabelWidth: '120px',
                dialogImageUrl: '',
                dialogVisible: false,
                dialogVisible1: false,
            }
        },
        created: function () {
            this.getVideoList();
            this.getType();
        },
        watch: {
            search(curVal, oldVal) {
                this.getVideoList();
            },
            dialogVisible1(curVal, oldVal){
                this.fileList = [];
            }
        },
        methods: {
            getVideoList() {
                let here = this;
                let union = {
                    currentPage: here.currentPage,
                    search: here.search
                };
                union = encodeURIComponent(JSON.stringify(union));
                axios({
                    method: 'post',
                    url: '/dao/videoList',
                    data: union
                }).then(function (response) {
                    let json = JSON.parse(decodeURIComponent(response.data));
                    here.tableData = json.tableData;
                    here.totalPage = json.totalPage;
                });
            },
            getType() {
                let here = this;
                axios({
                    method: 'post',
                    url: '/dao/typeTotalList',
                }).then(function (response) {
                    here.typeList = JSON.parse(decodeURIComponent(response.data));
                });
            },
            handlePlay(index, row) {
                axios({
                    method: 'post',
                    url: '/dao/VideoPlay',
                    data: row
                });
                window.location.href="http://localhost:8080/pages/player.html?av="+row.av;
            },
            imgEdit(index, row) {
                axios({
                    method: 'post',
                    url: '/dao/videoVid',
                    data: row.vid,
                })
                this.dialogVisible1 = true;
            },
            handleEdit(index, row) {
                this.form.vid = row.vid;
                this.form.name = row.name;
                this.form.type = row.type;
                this.form.introduce = row.introduce;
                this.form.author = row.author;
                this.form.av = row.av;
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                let here = this;
                let row2 = encodeURIComponent(JSON.stringify(row));
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'post',
                        url: '/dao/update/videoDelete',
                        data: row2
                    }).then(function (response) {
                        let data = JSON.parse(decodeURIComponent(response.data));
                        if(data.success === "1"){
                            here.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            here.getVideoList();
                        } else {
                            here.$message.error("删除失败");
                        }
                    });
                }).catch(() => {
                    here.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            sub() {
                let here = this;
                let data = encodeURIComponent(JSON.stringify(this.form));
                if (this.form.name !== '' && this.form.introduce !== '' && this.form.type !== '' && this.form.author !== '') {
                    axios({
                        method: 'post',
                        url: '/dao/update/videoEdit',
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
                        },
                        data: data,
                    }).then(function (response) {
                        let data = JSON.parse(decodeURIComponent(response.data));
                        if (data.success === "1") {
                            here.$message({
                                type: 'success',
                                message: '修改成功'
                            });
                            here.getVideoList();
                        } else {
                            here.$message.error("用户不存在");
                        }
                    });
                } else {
                    here.$message.error("数据不完整");
                }
                this.formInit();
            },
            add() {
                this.formInit();
                this.dialogFormVisible = true;
            },
            formInit() {
                this.form.vid = '';
                this.form.name = '';
                this.form.introduce = '';
                this.form.type = '';
                this.form.author = '';
                this.form.av = ''
            },
            handleCurrentChange(val) {
                this.getVideoList();
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            submitImg() {
                this.submitUpload();
            },
            uploadSuccess(response, file, fileList) {
                let data = JSON.parse(decodeURIComponent(response));
                if (data.success === "1") {
                    this.dialogVisible1 = false;
                    this.$message({
                        type: 'success',
                        message: '上传成功'
                    });
                    this.getVideoList();
                    this.fileList = [];
                } else {
                    this.$message.error("上传失败");
                }

            }
        },
    });
</script>
</html>
